<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body>
        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">Hover效果</h1>
            <div
                class="w-[200px] text-sm/10 m-4 mx-auto h-10 text-white text-center bg-black hover:bg-orange-500 hover:text-black"
            >
                按钮
            </div>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">Focus效果</h1>
            <button
                class="w-[200px] text-sm/10 m-4 mx-auto h-10 text-white text-center bg-black focus:bg-orange-500 focus:text-black"
            >
                按钮
            </button>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">Active效果</h1>
            <button
                class="w-[200px] text-sm/10 m-4 mx-auto h-10 text-white text-center bg-black active:bg-orange-500 active:text-black"
            >
                按钮
            </button>
        </section>

        <section class="m-3 p-5 border-2 border-black-500">
            <h1 class="text-lg text-red-500 font-bold">Group效果组</h1>
            <a
                href="#"
                class="group block max-w-xs mx-auto rounded-lg p-6 bg-white shadow-lg space-y-3 hover:bg-sky-500"
            >
                <div class="flex items-center">
                    <h3 class="group-hover:text-white">Card Title</h3>
                </div>
                <p class="group-hover:text-white">This is some card text</p>
            </a>
        </section>
    </body>
</html>
